{{define "role/authorizeUser.html"}}

<!DOCTYPE html>
<html>
	<head>
		{{template "header"}}
		<style>
			ul.ztree li {
				white-space: normal !important
			}

			ul.ztree li span.button.switch {
				margin-right: 5px
			}

			ul.ztree ul ul li {
				display: inline-block;
				white-space: normal
			}

			ul.ztree > li {
				padding: 15px 25px 15px 15px;
			}

			ul.ztree > li > ul {
				margin-top: 12px;
				border-top: 1px solid rgba(0, 0, 0, .1);
			}

			ul.ztree > li > ul > li {
				padding: 5px
			}

			ul.ztree > li > a > span {
				font-size: 15px;
				font-weight: 700
			}
		</style>
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
				<a href="/welcome">首页</a>
				<a href="/admin/role/list">角色管理</a>
				<a><cite>授权用户</cite>-<cite class="we-red">当前角色：{{.role.Rolename}}</cite></a>
			</span>
			<button class="layui-btn fr" style="margin-right: 5px;" data-submit-role-user type='button'>保存</button>
		</div>
		<div class="weadmin-body ">
			<div class="layui-form-item">
				<ul id="zTree" class="ztree loading">
				</ul>
			</div>
		</div>
		<div id="_flashmsg_" style="display: none;">{{range .flashmsg}}{{.}}{{end}}</div>
    </body>

	{{template "jsfile"}}
	<script src="/static/js/jquery-2.2.4.min.js"></script>
	<link rel="stylesheet" href="/static/js/ztree/zTreeStyle/zTreeStyle.css">
	<script src="/static/js/ztree/jquery.ztree.all.min.js"></script>
	<script type="text/javascript">
		var resourceJsonData = JSON.parse('{{.roleAuthUserList}}');
		function getListToTree(data, pid){
			var result = [];
			if(data.length <= 0){
				return result;
			}

			userIcon = '/static/js/ztree/zTreeStyle/img/diy/user.png';
			orgIcon = '/static/js/ztree/zTreeStyle/img/diy/org.png';
			for(var i=0,len=data.length;i<len;i++){
				node = data[i];
				if(node && node.pid == pid){
					data.splice(i--,1);
					len--;
					result.push({
						id:node.id,
						name:node.name,
						pid:node.pid,
						isParent:(node.isParent==1),
						open:true,
						checked:(node.checked==1),
						icon:(node.isuser==1?userIcon:orgIcon),
						children:getListToTree(data, node.id)
					});
				}
			}
			return result;
		}
		var treeData = getListToTree(resourceJsonData, 'org0');

		layui.extend({
			admin: '/static/js/admin',
		});
		layui.use(['admin'], function(){
			var admin = layui.admin;
			//弹出Flash信息
			$(document).ready(function(){
				msg = $("#_flashmsg_").text()
				if(msg){
					layer.msg(msg, {time:3*1000,icon: 1});
				}
			});
		});

		$(function () {
			window.roleForm = new function () {
				this.data = treeData;
				this.ztree = null;
				this.setting = {
					view: {showLine: true, showIcon: true, dblClickExpand: false},
					check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}},
					callback: {
						onClick: function onClick(e,treeId, treeNode) {
							if (treeNode.children.length < 1) {
								window.roleForm.ztree.checkNode(treeNode, !treeNode.checked, true, true);
							} else {
								window.roleForm.ztree.expandNode(treeNode);
							}
						}
					}
				}
				this.showTree = function () {
					this.ztree = jQuery.fn.zTree.init(jQuery("#zTree"), this.setting, this.data);
				}
				this.submit = function () {
					var userIds = [];
					var data = this.ztree.getCheckedNodes(true);
					for (var i in data) {
						(data[i].id.indexOf('org')<0) && userIds.push(data[i].id);
					}

					$.ajax({
						url:'/admin/role/authorizeUser/'+'{{.role.Id}}',
						type:'POST',
						data:{userIds: userIds},
						dataType:'json',
						success: function(result){
							if(result.status){
								layer.msg("授权成功!",{time:3*1000,icon:1},function(){
									//自动关闭layer
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								})
							}else{
								layer.msg(result.message,{time:6*1000,icon:2})
							}
						}
					});
					return false;
				}
				this.showTree();
			}

			$('[data-submit-role-user]').on('click', function () {
				window.roleForm.submit();
			});
    	});
	</script>

</html>
{{end}}